<template>
  <button
    @click="handleClick"
    class="we-button"
    :class="classObj"
    :style="styleObj"
  >
    <span>
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  // 接收参数
  props: {
    size: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },

  computed: {
    // 计算样式
    styleObj() {
      switch (this.size) {
        case "small":
          return { "min-width": "56px", height: "32px", fontSize: "12px" };
          break;
        case "mini":
          return { "min-width": "56px", height: "28px", fontSize: "12px" };
          break;
        default:
          return { "min-width": "70px", height: "38px", fontSize: "14px" };
          break;
      }
    },
    // 计算类名
    classObj() {
      return {
        "we-button-primary": this.type === "primary",
        "we-button-danger": this.type === "danger",
        "we-button-success": this.type === "success",
        "we-button-warning": this.type === "warning",
      };
    },
  },
  methods: {
    handleClick() {
      this.$emit("click");
    },
  },
};
</script>

<style lang="less" scoped>
// 默认按钮
.we-button {
  margin-right: 10px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  cursor: pointer;
  outline: none;
  border-radius: 4px;
  transition: 0.1s;
  &:hover {
    border: 1px solid #5ab5ff;
    background-color: #5ab5ff;
    color: #fff;
  }
}
.we-button-primary {
  background-color: #0063c7;
  border: 1px solid #0063c7;

  color: #fff;
  &:hover {
    border: 1px solid #5ab5ff;
    background-color: #5ab5ff;
    color: #fff;
  }
}
.we-button-danger {
  background-color: red;
  border: 1px solid red;

  color: #fff;
  &:hover {
    border: 1px solid #f56c6c;
    background-color: #f56c6c;
    color: #fff;
  }
}
.we-button-success {
  background-color: green;
  border: 1px solid green;
  color: #fff;
  &:hover {
    border: 1px solid #67c23a;
    background-color: #67c23a;
    color: #fff;
  }
}
.we-button-warning {
  background-color: orange;
  border: 1px solid orange;
  color: #fff;
  &:hover {
    border: 1px solid #e6a23c;
    background-color: #e6a23c;
    color: #fff;
  }
}
// warning
</style>
